<script lang="ts" setup name="CapitalAccount">
import {useRouter} from 'vue-router';

const router = useRouter();
const moneyInput = ref('1000');
const moneySympol = ref('RS');
const showPopover = ref(false);
const showRule = ref(false);
const options = [
  {text: 'RS1', value: 0},
  {text: 'RS2', value: 1},
  {text: 'RS3', value: 2},
];
const onSelect = (item) => {
  moneySympol.value = item.text
}
const handleNext = () => {
  showRule.value = true
}
const hanleCloseRule = () => {
  showRule.value = false
}
</script>
<template>
  <nav-header :isWhiteArrow="true" class="header" title='入金金额'></nav-header>
  <div class="content">
    <div class="money-container">
      <div class="input">
        <input v-model="moneyInput" disabled placeholder=""/>
        <van-popover
            v-model:show="showPopover"
            :actions="options"
            @select="onSelect"
        >
          <template #reference>
            <span class="rs-drawpdown">{{ moneySympol }}<van-icon name="arrow-down"/></span>
          </template>
        </van-popover>
      </div>
      <div class="balance">可用余额: RS 9,645.50</div>
    </div>
  </div>
  <div class="btn-container">
    <van-button type="primary" @click="handleNext">下一步</van-button>
  </div>
  <van-number-keyboard
      :show="true"
      v-model="moneyInput"
  />
  <van-dialog class="rule-dialog" v-model:show="showRule" title="入金流程说明">
    <div class="rule-container">
      <p>欢迎使用我们的A/D应用平台（以下简称”A/D平台”）。我们非常重视您的隐私权，并致力于保护您的个人信息。本隐私政策皆在向您说明我们收集、使用和保护您的个人信息的方式。请在使用我们的应用程序之前仔细阅读本隐私政策。</p>
      <p>1.1 注册信息：当您注册成为我们的应用程序用户时，我们可能会收集您提供的信息，例如您的姓名、电子邮件地址、手机号码等。</p>
      <p>1.2 账户信息：为了使用我们的应用程序提供的功能，您可能需要提供一些个人信息，例如您的银行账户、数字货币钱包地址等。</p>
      <p>1.3 日志信息：在您使用应用程序时，我们可能会收集您的日志信息，包括您的设备信息、操作记录、IP地址等。</p>
    </div>
    <template #footer>
      <van-button @click="hanleCloseRule" class="btn-footer" type="primary">已知晓规则</van-button>
    </template>
  </van-dialog>
</template>

<style lang="scss" scoped>
.header {
  background: #244FFF;

  :deep(.nav-header_center) {
    color: #fff;
  }
}

.content {
  padding: 10px 10px 0 10px;
  background: #244FFF;
  min-height: 126px;

  .money-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;

    .input {
      display: flex;
      align-items: center;
      justify-content: center;

      input {
        max-width: 50%;
        margin-right: 4px;
        outline: none;
        background: transparent;
        border: none;
        text-align: center;
        color: #fff;
        font-size: 15px;

        &::placeholder {
          color: #fff;
        }
      }
    }

    .rs-drawpdown {
      position: relative;
      top: -2px;
      color: #fff;
      font-size: 8px;

      .van-icon-arrow-down {
        font-size: 5px;
        margin-left: 1.5px;
      }
    }

    .balance {
      margin-top: 10px;
      font-size: 7px;
      text-align: center;
      color: #FFFFFF;
    }
  }
}

.btn-container {
  background: #fff;
  padding: 10px;

  .van-button {
    width: 100%;
    border-radius: 100px;
    background: #244FFF;
    border: none;
    font-size: 8px;
  }
}

</style>
<style lang="scss">
.rule-dialog {
  .van-dialog__header {
    font-size: 8px;
    padding-top: 10px;
  }
  .van-dialog__content {
    max-height: 350px;
    overflow-y: auto;
  }
  .rule-container {
    min-height: 150px;
    padding: 8px;
    p {
      margin: 0 0 4px 0;
      font-size: 7px;
    }
  }
  .btn-footer {
    width: 80%;
    border-radius: 100px;
    background: #244FFF;
    border: none;
    font-size: 8px;
    margin-left: 10%;
    margin-bottom: 10px;
    line-height: 1;
  }
}
</style>
